<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 轮播图示例</title>
    <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">
    <style>
        .box{
            display: flex;
            justify-content: center;
        }
        .box1{
        }
        #carousel {
            position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }

        .carousel-images {
            display: flex;
            transition: transform 0.5s ease;
        }

        .carousel-images img {
            min-width: 600px;
            max-width: 600px;
            height: 400px;
            object-fit: contain /* 根据需要调整图片填充方式 */
        }

        #prev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            left: 10px;
        }

        #next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            right: 10px;
        }


    </style>
</head>
<body>
<div class="box">
    <div id="carousel" class="box1">
        <div class="carousel-images">
            <img src="https://img.dytt89.com/d/file/html/gndy/dyzz/2024-11-03/37c60a3469363741c27724625baff216.jpg" alt="Image 1" width="600" height="400">
            <img src="https://img.dytt89.com/d/file/html/gndy/dyzz/2024-11-01/4327b8d5ad9f97679bcf8aea66baa1b2.jpg" alt="Image 1" width="600" height="400">
            <img src="https://img.dytt89.com/d/file/html/gndy/dyzz/2024-10-30/29cd67bec615c6e5433082ac2079259b.jpg" alt="Image 1" width="600" height="400">
            <img src="https://img.dytt89.com/d/file/html/gndy/dyzz/2024-11-02/6840672410f7cfca81a38d316b099aad.jpg" alt="Image 2" width="600" height="400">
            <img src="https://img.dytt89.com/d/file/html/gndy/dyzz/2024-11-03/d8ee6208916533e619b3e6e636f49589.jpg" alt="Image 3" width="600" height="400">
        </div>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</div>
<script>
    const images = document.querySelectorAll('.carousel-images img');
    const totalImages = images.length;
    let currentIndex = 0; // 初始化索引为0
    window.addEventListener('load', () => {
        showImage(currentIndex); // 确保图片加载完成后显示
    });


    function showImage(index) {
        const carouselImages = document.querySelector('.carousel-images');
        carouselImages.style.transform = `translateX(-${index * 600}px)`;
    }

    function nextImage() {
        if (currentIndex === totalImages - 1) {
            currentIndex = 0; // 如果是最后一张，直接跳回第一张
        } else {
            currentIndex++; // 否则跳到下一张
        }
        showImage(currentIndex);
    }

    function prevImage() {
        if (currentIndex === 0) {
            currentIndex = totalImages - 1; // 如果是第一张，直接跳到最后一张
        } else {
            currentIndex--;
        }
        showImage(currentIndex);
    }


    document.getElementById('next').addEventListener('click', nextImage);
    document.getElementById('prev').addEventListener('click', prevImage);

    // 页面加载完成时显示第一张图片
    window.addEventListener('load', () => {
        showImage(currentIndex);
    });

    // 自动播放功能
     setInterval(nextImage, 3000); // 每3秒切换一张图片
</script>


</body>
</html>
